
import React from 'react';
import { Input,Button } from 'antd';
import { SendOutlined, UserOutlined } from '@ant-design/icons';

import './ChatContainer.css';

const { TextArea } = Input;

class ChatContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
    };
  }
  componentDidMount() {
    this.initWebSocket();
  }
  initWebSocket() {
    const ws = new WebSocket('ws://127.0.0.1:8081/websocket/1');
    ws.onopen = () => {
      console.log('WebSocket连接成功');
    };
    ws.onmessage = (evt) => {
      console.log(evt.data);
    };
    ws.onclose = () => {
      console.log('WebSocket连接关闭');
    };
    ws.onerror = () => {
      console.log('WebSocket连接发生错误');
    };

    
  }




  render() {
    return (
      <div>
        <div className="chat-container">
          {/* 工具栏 */}
          <div className='chat-tool'>

          </div>
          {/* 会话区 */}
          <div className='chat-channel'>

          </div>
          {/* 消息区 */}
          <div className='chat-message'>
            <div className='chat-message-banner'></div>
            <div className='chat-message-list'></div>
            {/* 输入区 */}
            <div className='chat-message-input'>
              <TextArea className='chat-message-input-1'  size="large" placeholder="发送消息" autoSize/>
              <div className='chat-message-input-send'>
              <Button
                type="primary"
                icon={<SendOutlined style={{ fontSize: '16px', color: '#1556f0' }}/>}/>
                
              </div>
            </div>
          </div>
        </div>


      </div>
    );
  }
}
export default ChatContainer;